<template>
    <el-drawer
        v-model="isShow"
        title="我的任务"
        :destroy-on-close="true"
        size="50%"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :show-close="false"
    >
        <el-form
            ref="queryFormRef"
            :model="queryForms"
            label-width="auto"
            label-position="left"
            :rules="queryFormRules"
        >
            <el-form-item label="任务名称：">
                <el-input v-model="queryForms.taskname" disabled/>
            </el-form-item>
            <el-form-item label="任务下发人：">
                <el-input v-model="queryForms.addUserName" disabled/>
            </el-form-item>
            <el-form-item label="任务接收人：">
                <UserSearchSelect v-model="queryForms.receiverId" disabled/>
            </el-form-item>
            <el-form-item label="任务下发时间：">
                <el-date-picker
                    v-model="queryForms.adddate"
                    type="datetime"
                    placeholder="请选择任务下发时间"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    disabled
                />
            </el-form-item>
            <el-form-item label="任务内容：">
                <el-input v-model="queryForms.taskcontent" type="textarea" :rows="3" disabled/>
            </el-form-item>
            <el-form-item label="接收时间：">
                <el-input v-model="queryForms.receivedate" disabled/>
            </el-form-item>
            <el-form-item label="任务处理时间：" required prop="handledate">
                <el-date-picker
                    v-model="queryForms.handledate"
                    type="datetime"
                    placeholder="请选择任务处理时间"
                    value-format="YYYY-MM-DD HH:mm:ss"
                />
            </el-form-item>
            <el-form-item label="任务处理情况：" required prop="treatment">
                <el-input v-model="queryForms.treatment" type="textarea" :rows="3"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <!-- 完成 -->
            <el-button type="primary" @click="updateTaskHandle(queryFormRef)">提交</el-button>
            <!-- 取消 -->
            <el-button @click="changeShowStatus">关闭</el-button>
        </template>
    </el-drawer>
</template>

<script setup>
import UserSearchSelect from "@/components/UserSearchSelect/UserSearchSelect.vue";
import {getTaskInfoByTaskId} from "@/api/FireAction/ExecuteFireAction.js";
import {completeTask} from "@/api/FireAction/MyTask.js";
import {useTemplateRef} from "vue";

const emit = defineEmits(['refresh-list'])
const isShow = ref(false)

const defaultQueryForms = {
    // 应急处置 ID
    managementId: '',
    // 任务 ID
    taskId: '',
    // 任务名称
    taskname: '',
    // 任务下发人
    // adduserId: userId,
    addUserName: '',
    // 任务接收人
    receiverId: '',
    // 任务下发时间
    adddate: '',
    // 任务内容
    taskcontent: '',
    // 接收时间
    receivedate: '',
    // 任务处理时间
    handledate: '',
    // 任务处理情况
    treatment: ''
}
const queryForms = ref({...defaultQueryForms})
const queryFormRef = useTemplateRef('queryFormRef')
const queryFormRules = reactive({
    handledate: [
        {required: true, message: '请选择任务处理时间', trigger: 'blur'}
    ],
    treatment: [
        {required: true, message: '请输入任务处理情况', trigger: 'blur'}
    ]
})

// 变更显示状态
const changeShowStatus = () => {
    isShow.value = !isShow.value
    if (!isShow.value) {
        queryForms.value = {...defaultQueryForms}
    }
}

const showFinishTask = (data) => {
    changeShowStatus()
    const {task_id, management_id} = data
    queryForms.value.taskId = task_id
    queryForms.value.managementId = management_id
    getTaskDetail()
}

defineExpose({showFinishTask})

// 获取任务详情
const getTaskDetail = async () => {
    const res = await getTaskInfoByTaskId(queryForms.value.taskId)
    queryForms.value = {
        ...queryForms.value,
        ...res.data
    }
}

// 完成任务
const updateTaskHandle = async (elForm) => {
    if (!elForm) return
    await elForm.validate(async (valid, fields) => {
        if (valid) {
            const data = {
                taskId: queryForms.value.taskId,
                // 任务处理时间
                handledate: queryForms.value.handledate,
                // 任务处理情况
                treatment: queryForms.value.treatment
            }
            await completeTask(data)
            changeShowStatus()
            emit('refresh-list')
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>

<style scoped lang="scss">

</style>